<template>
  <div>
    <swiper class="swiper" :options="swiperOption" v-if="data">
      <swiper-slide
        v-for="{ pic, title, hid } in data"
        :key="hid"
        @click="goDetail(hid)"
      >
        <div>
          <a>
            <div>
              <img class="city_photo" :src="`img/${pic}`" alt="" />
              <button>
                <i
                  @click="addCollection()"
                  class="collectionState == false ? el-icon-star-off : el-icon-star-on"
                ></i>
              </button>
              <!-- <button @click="delCollection" v-if="collectionState == true">
                <i style="color: #ff5d5d" class="el-icon-star-on"></i>
              </button> -->
            </div>
            <div>{{ title }}</div>
            <div>
              <div style="margin-top: 5px">
                <svg
                  viewBox="0 0 128 24"
                  width="68"
                  height="12"
                  aria-label
                  title
                  fill=" #00aa6c"
                >
                  <path
                    d="M 12 0C5.388 0 0 5.388 0 12s5.388 12 12 12 12-5.38 12-12c0-6.612-5.38-12-12-12z"
                    transform="translate(0 0)"
                  ></path>
                  <path
                    d="M 12 0C5.388 0 0 5.388 0 12s5.388 12 12 12 12-5.38 12-12c0-6.612-5.38-12-12-12z"
                    transform="translate(26 0)"
                  ></path>
                  <path
                    d="M 12 0C5.388 0 0 5.388 0 12s5.388 12 12 12 12-5.38 12-12c0-6.612-5.38-12-12-12z"
                    transform="translate(52 0)"
                  ></path>
                  <path
                    d="M 12 0C5.388 0 0 5.388 0 12s5.388 12 12 12 12-5.38 12-12c0-6.612-5.38-12-12-12z"
                    transform="translate(78 0)"
                  ></path>
                  <path
                    d="M 12 0C5.388 0 0 5.388 0 12s5.388 12 12 12 12-5.38 12-12c0-6.612-5.38-12-12-12z"
                    transform="translate(104 0)"
                  ></path>
                </svg>
              </div>
            </div>
            <div></div>
          </a>
        </div>
      </swiper-slide>
      <div
        style="position: absolute; top: 30%; left: 0px"
        class="swiper-button-prev rot"
        slot="button-prev"
      >
        <svg viewBox="0 0 24 24" width="24px" height="24px">
          <path
            d="M10.304 3.506l-8.048 8.047a.644.644 0 000 .895l8.048 8.047a.624.624 0 00.883 0l.882-.883a.624.624 0 000-.883l-5.481-5.48h14.714a.625.625 0 00.623-.625v-1.248a.624.624 0 00-.623-.624H6.588l5.481-5.481a.624.624 0 000-.883l-.882-.883a.623.623 0 00-.883-.004c-.001.002-.002.003 0 .005z"
          ></path>
        </svg>
      </div>
      <div
        style="position: absolute; top: 30%; right: 0px"
        class="swiper-button-next rot"
        slot="button-next"
      >
        <svg viewBox="0 0 24 24" width="24px" height="24px">
          <path
            d="M13.696 3.502a.624.624 0 00-.884.004l-.882.883a.624.624 0 000 .883l5.481 5.481H2.698a.624.624 0 00-.623.624v1.248c0 .346.279.623.623.625h14.714l-5.481 5.48a.624.624 0 000 .883l.882.883c.245.244.64.244.883 0l8.049-8.047a.646.646 0 000-.895l-8.049-8.048v-.004z"
          ></path>
        </svg>
      </div>
    </swiper>
  </div>
</template>

<script>
export default {
  props: ["data"],
  mounted() {
    // console.log('props');
  },
  methods: {
    goDetail(id) {
      this.$router.push(`/detail?jid=${id}`);
    },
    addCollection() {
      // if (this.collectionState == true) {
      //   collectionState == false;
      // } else {
      //   collectionState == true;
      // }
    },
    // add() {
    //   this.collectionIds.idBlog = this.query.id; //当前收藏物品的id
    //   this.collectionIds.idUser = this.user.id; //当前用户ID
    //发送收藏请求
    // this.axios.post("collection", this.collectionIds).then(res => {
    //   if (res.code === "0") {
    //     this.$message({
    //       message: "收藏成功",
    //       type: "success",
    //     });
    //     this.collectionState = true;
    //     console.log(this.collectionState);
    //   } else {
    //     this.$message({
    //       message: res.msg,
    //       type: "error",
    //     });
    //   }
    // });
    // },
  },
  data() {
    return {
      collectionState: false, //收藏状态 默认是false, true可以收藏
      // data: [],
      value: 5,
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 16,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  margin-bottom: 20px;
}
a {
  text-decoration: none;
  color: #000;

  div:nth-child(1) {
    display: flex;
    position: relative;

    button {
      position: absolute;
      right: 8px;
      top: 8px;
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 50%;
      //opacity: 0.8;
      padding: 5px;
      i {
        font-size: 20px;
      }
    }
  }
  div:nth-child(2) {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 600;
  }
  div:nth-child(4) {
    color: #333333;
  }
  .city_photo {
    width: 290px;
    height: 220px;
    &:hover {
      opacity: 0.7;
    }
  }
}
.swiper-container {
  --swiper-navigation-size: 0;
}

.swiper-button-prev,
.swiper-button-next {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 6px;
  background-color: white;
  border: 1px solid black;
  &:hover {
    background-color: #e4e4e4;
    color: white;
  }
}
//轮播图按钮禁用时不显示
.swiper-button-disabled {
  opacity: 0;
}
</style>
